<html xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/css/index.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="output"></div></br>
<div id="text_time"></div></br>
<input id="input" value="" oninput="change()"></br>
<button id="resert">resert</button>

<script>
    var input_area = document.getElementById('input')
    var out_text = document.getElementById('output')
    var n = 0
    var first_true = 'true'
    var error_text = 0
    var true_text = 0
    var begin_time = 0
    var over_time = 5
    var text_time = document.getElementById('text_time')

    var all_rext = [
        "aaaaa",
        "bbbbb",
        "ccccc",
        "ddddd"
    ]

    //更新示例
    function updata_index_text() {
        out_text.innerText = ''
        all_rext[n].split('').forEach(char => {
            const charSpan = document.createElement('span')
            charSpan.innerText = char
            out_text.appendChild(charSpan)
        })
        n = n + 1
    }

    // 当输入框里面数据变化时判断是否正确
    function change() {
        curr_input = input_area.value;
        curr_input_array = curr_input.split('');
        quoteSpanArray = out_text.querySelectorAll('span');
        quoteSpanArray.forEach((char, index) => {
            if (typeof curr_input_array[index] == 'undefined') {
                char.classList.remove('incorrect_char');
                char.classList.remove('correct_char');
            } else if (curr_input_array[index] != char.innerText) {
                char.classList.remove('incorrect_char');
                char.classList.remove('correct_char');
                char.classList.add('correct_char');
            } else if (curr_input_array[index] == char.innerText) {
                char.classList.remove('incorrect_char');
                char.classList.remove('correct_char');
                char.classList.add('incorrect_char');
            } else {
                console.log('未知错误')
            }
        })

        if (curr_input_array.length == out_text.innerText.length) {
            count_error_true()
            // 更新示例
            updata_index_text()
            // 计算正确与错误字数
            input_area.value = ""
        }
    }

    // 输入框第一次获得焦点时更新第一行
    input_area.onfocus = function () {
        if (first_true == 'true') {
            // 更新第一行
            updata_index_text()
            console.log('1')
            first_true = 'false'

            begin_text()
        } else {
            console.log(first_true)
        }
    }

    function begin_text() {
        input_area.value = ''
        interval = setInterval(time_over, 1000);
    }

    // 定义时间循环，定义结束之后怎么办
    function time_over() {
        begin_time = begin_time + 1
        text_time.textContent = over_time - begin_time + 's'
        if (begin_time == over_time) {
            clearInterval(interval)
            count_error_true()
            console.log("true:" + true_text)
            console.log("error" + error_text)
            input_area.blur()
            $.ajax({
                type: "POST",
                url: "/score",
                data: {
                    true: true_text,
                    error: error_text,
                    over_time: over_time
                },
                success: function (message) {
                    console.log(message)
                    alert("提交成功");
                },
                error: function (message) {
                    alert("提交失败");
                }
            });
            reset_all()

        }
    }

    // 重置数据，重新开始
    function reset_all() {
        n = 0
        first_true = 'true'
        error_text = 0
        true_text = 0
        begin_time = 0
        input_area.value = ''
    }

    // 计算当前输入框正确与错误的字符
    function count_error_true() {
        all_span = out_text.querySelectorAll('span');
        all_span.forEach((char, index) => {
            if (char.classList[0] == 'correct_char') {
                error_text = error_text + 1
            } else if (char.classList[0] == 'incorrect_char') {
                true_text = true_text + 1
            }
        })
        console.log('--------')
    }
    
    function resert() {

    }


</script>
</body>
</html>
